<template>
  <!-- 列表 -->
  <div
    v-srcollloadmore="srcollloadmore"
    class="list_list"
    ref="scollElement"
    :style="
      rightlistheight
        ? ' height: calc(100% - 128px);'
        : ' height: calc(100% - 90px);'
    "
  >
    <transition-group name="list-complete">
      <div class="list" v-for="(v, i) in rightlistList" :key="i">
        <div class="list_div">
          <div
            class="list_img_div"
            ref="list1"
            @click="ClassifyListClick(v.templateId)"
            :style="{
              background:
                'url(' +
                v.templateImage +
                ') center center / contain no-repeat',
            }"
          ></div>
        </div>
        <p class="list_p">{{ v.templateName }}</p>
      </div>
    </transition-group>
    <div v-show="iflistcon" class="list_null">
      <p>没有匹配内容</p>
    </div>
  </div>
</template>
  
  <script>
import mixin from "@/utils/mixin";
import { mapState } from "vuex";
export default {
  watch: {
    // watch 监听 props 中的值
    rightlistList(newVal) {
      // newVal 为新值， oldVal 为旧值
      this.rightlistList = newVal;
      if (this.rightlistList.length === 0) this.iflistcon = true;
      else this.iflistcon = false;
    },
    rightlistdel(newVal) {
      let index = this.rightlistList.findIndex((v) => v.templateId === newVal);
      this.rightlistList.splice(index, 1);
    },
    scrollTop(newVal) {
      if (newVal == 0) this.$refs.scollElement.scrollTop = 0;
    },
  },
  computed: {
    ...mapState("templateStage", ["listImg"]),
  },
  mixins: [mixin],
  props: ["rightlistheight", "rightlistList", "rightlistdel", "scrollTop"],
  data() {
    return {
      iflistcon: false,
      height: null,
      draw: {
        imgW: null,
        imgH: null,
        uploadImg: "",
      },
    };
  },
  methods: {
    srcollloadmore() {
      this.$datatools.throttle(this.$emit("TemplateListPage"), 5000);
    },
    //点击选择模板
    ClassifyListClick(id) {
      this.$emit("TemplateListCon", id);
    },
    scrollChange() {
      this.$emit("scroll", this.$refs.scollElement.scrollTop);
    },
  },
  created() {
    this.height = this.rightlistheight;
    if (window.localStorage.getItem("eplatformpowertype") == 0)
      this.height = false;
  },
  mounted() {
    // 获取指定元素
    this.$refs.scollElement.addEventListener("scroll", this.scrollChange, true);
  },
  beforeDestroy() {
    // 获取指定元素
    this.$refs.scollElement.removeEventListener(
      "scroll",
      this.scrollChange,
      true
    );
  },
};
</script>
  
  <style lang="less" scoped>
@import "../../assets/styles/frame.less";

.list_list {
  position: relative;
  top: 0;
  left: 0;
  z-index: 90;
  overflow-y: auto;
  width: 104%;
  margin-top: 20px;
  color: @color2;
  height: calc(100% - 90px);
  padding-right: 4%;
  // .divDFJS();
  // &::-webkit-scrollbar {
  //   width: 0px !important;
  // }
  .list_null {
    width: 100%;
    height: 40px;
    .cen();
    font-size: 16px;
  }
  .list {
    .divDWJ();
    display: inline-block;
    position: relative;
    width: calc(50% - 10px);
    height: auto;
    margin-bottom: 20px;
    transition: all 1s;
    overflow: hidden;
    &:nth-child(2n-1) {
      margin-right: 10px;
    }
    &:nth-child(2n) {
      margin-left: 10px;
    }
    .list_div {
      width: 100%;
      // border-radius: @radius1;
      overflow: hidden;
      position: relative;
      .list_img {
        width: 100%;
        height: 100%;
        display: block;
      }
      .list_xin {
        cursor: pointer;
        position: absolute;
        width: 18px;
        height: 18px;
        bottom: 6px;
        right: 8px;
      }
      .list_shanchu {
        position: absolute;
        width: 18px;
        height: 18px;
        top: 8px;
        right: 8px;
        cursor: pointer;
      }
      .list_img_div {
        width: 100%;
        height: 0;
        padding-top: 100%;
        margin: 0;
        border: 1px solid #dedddd;
        border-radius: 5px;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
    }
    .list_p {
      margin-top: 6px;
      text-align: center;
    }
  }
}
</style>